@extends('admin.layout.base')
@section('content')
    <link rel="stylesheet" href="{{asset('admin/style/eleTree.css')}}">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3" >
                <div class="layui-card">
                    <div class="layui-card-body">
                    <div class="eleTree " id="goods-data1" ></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table class="layui-hide" id="goods-data" lay-filter='goods-data'></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script>
        layui.config({
            base: '/admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'eletree'],function () {
            var table = layui.table;
            var eletree = layui.eletree;
            //展示已知数据
            table.render({
                elem: '#goods-data'
                ,height: 'full-100'
                ,cellMinWidth: 80
                ,toolbar: '#head_tool'
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    ,{field: 'username', title: '用户名', width: 120}
                    ,{field: 'email', title: '邮箱', minWidth: 150}
                    ,{field: 'sign', title: '签名', minWidth: 160}
                    ,{field: 'sex', title: '性别', width: 80}
                    ,{field: 'city', title: '城市', width: 100}
                    ,{field: 'experience', title: '积分', width: 80}
                    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
                ]]
                ,data: [{
                    "id": "10001"
                    ,"username": "杜甫"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "116"
                    ,"ip": "192.168.0.8"
                    ,"logins": "108"
                    ,"joinTime": "2016-10-14"
                }, {
                    "id": "10002"
                    ,"username": "李白"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "12"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                    ,"LAY_CHECKED": true
                }, {
                    "id": "10003"
                    ,"username": "王勃"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "65"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                }, {
                    "id": "10004"
                    ,"username": "贤心"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "666"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                }, {
                    "id": "10005"
                    ,"username": "贤心"
                    ,"email": "xianxin@layui.com"
                    ,"sex": "男"
                    ,"city": "浙江杭州"
                    ,"sign": "人生恰似一场修行"
                    ,"experience": "86"
                    ,"ip": "192.168.0.8"
                    ,"logins": "106"
                    ,"joinTime": "2016-10-14"
                }]
                ,skin: 'line' //表格风格
                ,even: true
                ,page: true //是否显示分页
                //,limits: [5, 7, 10]
                ,limit: 10//每页默认显示的数量
            });
            //监听表格
            table.on('tool(goods-data)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    console.log(data);
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });
            table.on('toolbar(goods-data)', function(obj){
                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'delete':
                        layer.msg('删除');
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                };
            });
            var data=[
                {
                    "id": 1,
                    "label": "安徽省",
                    "children": [
                        {
                            "id": 2,
                            "label": "马鞍山市",
                            "disabled": true,
                            "children": [
                                {
                                    "id": 3,
                                    "label": "和县"
                                },
                                {
                                    "id": 4,
                                    "label": "花山区",
                                    "checked": true
                                }
                            ]
                        },
                        {
                            "id": 22,
                            "label": "淮北市",
                            "children": [
                                {
                                    "id": 23,
                                    "label": "濉溪县"
                                },
                                {
                                    "id": 24,
                                    "label": "相山区",
                                    "checked": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 5,
                    "label": "河南省",
                    "children": [
                        {
                            "id": 6,
                            "label": "郑州市"
                        }
                    ]
                },
                {
                    "id": 10,
                    "label": "江苏省",
                    "children": [
                        {
                            "id": 11,
                            "label": "苏州市"
                        },
                        {
                            "id": 12,
                            "label": "南京市",
                            "children": [
                                {
                                    "id": 13,
                                    "label": "姑苏区"
                                },
                                {
                                    "id": 14,
                                    "label": "相城区"
                                }
                            ]
                        }
                    ]
                }
            ];

            var obj={
                elem: '#goods-data1',
                data: data,
                // url: "../eleTree/tree.json",
                renderAfterExpand: true,
                expandOnClickNode: true,
                defaultCheckedKeys: [23]
            };

            var el1=eletree.render(obj);
        });
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="head_tool">
            <div class="layui-table-tool-temp">
                <div class="layui-inline" lay-event="add">
                    <i class="layui-icon layui-icon-add-1"></i>
                </div>
            </div>
            <div class="layui-table-tool-self">
                <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
                    <i class="layui-icon layui-icon-cols"></i>
                </div>
                <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT">
                    <i class="layui-icon layui-icon-print"></i>
                </div>
                <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT">
                    <i class="layui-icon layui-icon-export"></i>
                </div>
            </div>
    </script>
@endsection
